<template>
  
  <div class="container">
    <div class="el-form">
      <el-form ref="form" :model="form" label-width="160px" :rules="rules" v-loading="loading" element-loading-text="图片生成中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(255, 255, 255, 0.1)">
        <el-form-item label="图片描述词（英文）" prop="tag">
          <el-input v-model="form.tag" placeholder="图片描述词（英文）"></el-input>
        </el-form-item>
        <el-form-item label="锐化"  prop="act">
          <el-input v-model="form.act" placeholder="需要生成的图片锐化程度请填写(1-6)"></el-input>
        </el-form-item>
        <el-form-item label="模型采样步数"  prop="bus">
          <el-input v-model="form.bus" placeholder="模型采样步数（最高28）"></el-input>
        </el-form-item>
        <el-form-item label="光泽"  prop="gz">
          <el-input v-model="form.gz" placeholder="光泽（越高曝光效果越严重, 比如1，2，3，4，5)"></el-input>
        </el-form-item>
        <el-form-item label="模型"  prop="mx">
          <el-select v-model="form.mx" placeholder="请选择模型">
            <el-option label="naf-diffusion" value="naf-diffusion"></el-option>
            <el-option label="nai-diffusion-furry" value="nai-diffusion-furry"></el-option>
            <el-option label="safe-diffusion" value="safe-diffusion"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集器"  prop="c">
          <el-select v-model="form.c" placeholder="请选择采集器">
            <el-option label="k_euler_ancestral" value="k_euler_ancestral"></el-option>
            <el-option label="k_euler" value="k_euler"></el-option>
            <el-option label="plms" value="plms"></el-option>
            <el-option label="k_lms" value="k_lms"></el-option>
            <el-option label="ddim" value="ddim"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">立即生成图片</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="pic">
       
      <el-image v-for="(i, index) in list" :src="i" :key="index" class="image"></el-image>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      loading: false,
      list: [],
      form: {
        tag: '',
        act: '',
        bus: '',
        gz: '',
        mx: '',
        c	: '',
        seed: undefined
      },
      rules: {
        tag: [
          { required: true, message: '请输入描述词(英文)', trigger: 'change' },
        ],
        act: [
          { required: true, message: '需要生成的图片宽度和高度请填写（1-6）', trigger: 'change' }
        ],
        bus: [
          { required: true, message: '请输入模型采样步数（最高28）', trigger: 'change' }
        ],
        gz: [
          { required: true, message: '请输入光泽', trigger: 'change' }
        ],
        mx: [
          { required: true, message: '请选择模型', trigger: 'change' }
        ],
        c: [{ required: true, message: '请选择采集器', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    objectToQuery() {
      let obj = arguments[0];
      let prefix = arguments[1];
      if (typeof obj !== "object") return "";
      const attrs = Object.keys(obj);
      return attrs.reduce((query, attr, index) => {
        // 判断是否是第一层第一个循环
        if (index === 0 && !prefix) query += "?";
        if (typeof obj[attr] === "object") {
          const subPrefix = prefix ? `${prefix}[${attr}]` : attr;
          query += this.objectToQuery(obj[attr], subPrefix);
        } else {
          if (prefix) {
            query += `${prefix}[${attr}]=${obj[attr]}`;
          } else {
            query += `${attr}=${obj[attr]}`;
          }
        }
        // 判断是否是第一层最后一个循环
        if (index !== attrs.length - 1) query += "&";
        return query;
      }, "");
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let str = this.objectToQuery(this.form)
          this.loading = true
          axios.get(`http://api.ziyuanhe.cn/api/aaiztu?apiKey=39c195b8e70701968ed789636d1379a9${str.replace('?', '&')}`).then(res => {
            console.log(res)
            if (!res.data) {
              this.loading = false
              this.$message.error('图片生成失败，请严格按照参数')
            } else {
              let param = `data:image/jpg;base64,` + res.data
              this.list.push(param)
              this.loading = false
              //跳转页面
              this.$router.push({
                name: 'page2',
                params: {
                  data: param
                }
              })
            }
          }).catch(() => {
            this.$message.error("请重新尝试")
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  /*height: 50%;*/
  margin: auto;
  display: flex;
}
.show {
  margin-left: 100px;
}
.el-form {
  width: 60%;
}
.pic {
  height: 800px;
  width: 50%;
}
.image {
  width: 33%;
  height: 33%;
}
</style>
